<template>
  <div class="container">
    <div class="headerTitle"></div>
    <div class="timeBox">
      <div class="left">{{ timeNow }}</div>
      <div class="right">
        <div class="rightWeek">{{ timeWeek }}</div>
        <div class="rightTime">{{ timeDate }}</div>
      </div>
    </div>
    <div class="roleBox">
      {{ userInfoName }}
      <img class="roleArrow" src="@/assets/形状 67.png" alt="" />
      <div class="roleBottomBox">
        <div class="goGovern" @click="goGovern">进入后台</div>
        <div class="loginOut" @click="loginOut">退出登录</div>
      </div>
    </div>
    <div class="left1Box">
      <div class="topTitle">
        <div class="leftTitle">现场监控</div>
        <div class="allTitle" @click="openVideoListDialog">全部 ></div>
      </div>
      <div class="videoBox">
        <video id="videoElement" controls muted></video>
      </div>
    </div>
    <div class="left2Box">
      <div class="topTitle">
        <div class="leftTitle">隐患整改</div>
        <!-- <div class="allTitle">全部 ></div> -->
      </div>
      <div class="firstBox" @click="openHiddenTrouble('')">
        <div class="left">
          <div class="firstTitle">隐患总数</div>
          <div class="firstNum">{{ screenNumBoj.total }}</div>
        </div>
        <div class="right">查看</div>
      </div>
      <div class="secondBox" @click="openHiddenTrouble('2')">
        <div class="left">
          <div class="firstTitle">已整改隐患数</div>
          <div class="firstNum">{{ screenNumBoj.isChange }}</div>
        </div>
        <div class="right">查看</div>
      </div>
      <div class="thirdBox" @click="openHiddenTrouble('1')">
        <div class="left">
          <div class="firstTitle">待整改隐患数</div>
          <div class="firstNum">{{ screenNumBoj.noChange }}</div>
        </div>
        <div class="right">查看</div>
      </div>
    </div>
    <div class="left3Box">
      <div class="topTitle">
        <div class="leftTitle">接入设备</div>
        <!-- <div class="allTitle">全部 ></div>  -->
      </div>
      <div class="selectBox">
        <div
          @click="chooseType(1)"
          :class="{ activeBgi: nowActive == 1 }"
          class="video"
        >
          视频类设备
        </div>
        <div
          @click="chooseType(2)"
          :class="{ activeBgi: nowActive == 2 }"
          class="video"
        >
          传感类设备
        </div>
      </div>
    </div>
    <div class="right1box">
      <div class="topTitle">
        <div class="leftTitle">现场作业</div>
      </div>
      <div class="middleBox">
        <div class="leftLabel">
          现场作业数：<span class="num">{{ homeworkTotal }}</span>
        </div>
        <div class="allTitle" @click="openHomeworkDialog">全部 ></div>
      </div>
      <div class="homeworkList">
        <div class="homeItem" v-for="item in homeworkList" :key="item.id">
          <div class="location">{{ item.jobAddress }}</div>
          <div class="homeworkMan">
            <img src="@/assets/index/矩形 49.png" alt="" />作业人:{{
              item.jobOperator
            }}
          </div>
          <div class="homeworkMan time">
            <img src="@/assets/index/指示.png" alt="" />{{ item.jobTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="right2Box">
      <div class="topTitle">
        <div class="leftTitle">视频监测报警</div>
      </div>
      <div class="middleBox">
        <div class="leftLabel">
          视频监测报警总数:<span class="num">{{ videoTotal }}</span>
        </div>
        <div class="allTitle" @click="openVideoDialog">全部 ></div>
      </div>
      <div class="videoList">
        <div class="videoTitle">
          <div class="videoName">监测点位</div>
          <div class="videoEquip">关联设备</div>
          <div class="videoAlarmTime">报警时间</div>
          <div class="handle">操作</div>
        </div>
        <div
          class="videoTitle videoItem"
          v-for="item in videoList"
          :key="item.id"
        >
          <div class="videoName">{{ item.videoAddress }}</div>
          <div class="videoEquip">{{ item.videoEquipment }}</div>
          <div class="videoAlarmTime">{{ item.videoAlarmTime }}</div>
          <div class="handle yellowC">查看</div>
        </div>
      </div>
    </div>
    <div class="right3Box">
      <div class="topTitle">
        <div class="leftTitle">传感监测报警</div>
      </div>
      <div class="middleBox">
        <div class="leftLabel">
          传感监测报警总数:<span class="num">{{ gasTotal }}</span>
        </div>
        <div class="allTitle" @click="openSenseDialog">全部 ></div>
      </div>
      <div class="videoList">
        <div class="videoTitle">
          <div class="videoName">监测气体</div>
          <div class="videoEquip">数值</div>
          <div class="videoAlarmTime">报警时间</div>
          <div class="handle">操作</div>
        </div>
        <div
          class="videoTitle videoItem"
          v-for="item in gasList"
          :key="item.id"
        >
          <div class="videoName">{{ item.detectionGas }}</div>
          <div class="videoEquip">{{ item.detectionValue }}</div>
          <div class="videoAlarmTime">{{ item.gasAlarmTime }}</div>
          <div class="handle yellowC">查看</div>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="bottomItem" @click="openSpecialWorkDialog">
        <img src="@/assets/index/特殊作业.png" alt="" />
        <div class="fontColor">特殊作业证报表</div>
      </div>
      <div class="bottomItem">
        <img src="@/assets/index/消防.png" alt="" @click="openFireDialog"/>
        <div class="fontColor">消防报表</div>
      </div>
      <div class="bottomItem" @click="openFileDialog">
        <img src="@/assets/index/文件.png" alt="" />
        <div class="fontColor">文件网盘</div>
      </div>
      <div class="bottomItem" @click="openVehicleDialog">
        <img src="@/assets/index/人防车辆.png" alt="" />
        <div class="fontColor">车辆报表</div>
      </div>
      <div class="bottomItem2">
        <img src="@/assets/index/危废污染.png" alt="" />
        <div class="fontColor">危废报表</div>
      </div>
    </div>

    <!-- 车辆报表弹窗 -->
    <div class="problemDialog" v-if="vehicleDialog">
      <div class="dialogTitle">
        <div>车辆报表（{{ vehicleTotal }}）</div>
        <img src="@/assets/index/关  闭.png" alt="" @click="closeVehicle" />
      </div>
      <div class="dialogForm">
        <el-input
          placeholder="驾驶员"
          v-model="vehicleParams.carDriver"
        ></el-input>
        <el-select
          class="selectBox"
          v-model="vehicleParams.carStatus"
          placeholder="车辆状态"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="selectBox"
          v-model="vehicleParams.carType"
          placeholder="车辆类型"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button class="searchBtn" type="primary" @click="searchVehicleData"
          >查询</el-button
        >
        <el-button class="resetBtn" @click="resetVehicleData">重置</el-button>
        <!-- <el-button class="resetBtn" @click="addVehicleData">新增</el-button> -->
      </div>
      <div class="formBox">
        <el-table
          :data="vehicleData"
          style="width: 100%"
          :header-row-style="{
            backgroundColor: '#2A3533',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :header-cell-style="{
            backgroundColor: '#2A3533',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '7px 0',
            textAlign: 'center',
          }"
          :row-style="{
            backgroundColor: 'transparent',
            color: '#ffffff',
            borderBottom: '1px solid #022627',
            height: '36px',
            fontSize: '18px',
            textAlign: 'center',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '36px',
            padding: '3px 0',
            textAlign: 'center',
          }"
        >
          <el-table-column prop="carLicenseId" label="车牌号" width="140">
          </el-table-column>
          <el-table-column prop="carDriver" label="关联驾驶员">
          </el-table-column>
          <el-table-column prop="carStatus" label="车辆状态">
            <template slot-scope="scope">
              <div
                :class="{
                  yellowC: scope.row.carStatus == 1,
                  redC: scope.row.carStatus == 3,
                }"
              >
                {{ scope.row.carStatusDesc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carTypeDesc" label="车辆类型">
          </el-table-column>
          <el-table-column prop="gasStatus" label="车辆图片">
            <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px; height: 50px"
                  :src="scope.row.carImage"
                  :preview-src-list="scope.row.srcList"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          :background="false"
          layout="total,prev, pager, next"
          :total="vehicleTotal"
          :page-size="vehicleParams.pageSize"
          @current-change="currentVehiclePage"
        >
        </el-pagination>
      </div>
    </div>

    <div class="addVehicleDialog" v-if="addVehicleDialog">
      <div class="addVehicleTitle">
        <div>新增</div>
        <img
          @click="closeAddVehicleDialog"
          src="@/assets/index/关  闭.png"
          alt=""
        />
      </div>
      <div class="dialog-footer">
        <div class="confirmBtn" @click="closeAddVehicleDialog">确 定</div>
        <div class="cancelBtn" @click="closeAddVehicleDialog">取 消</div>
      </div>
    </div>

    <div class="mask" v-if="maskDialog"></div>

    <hiddenTrouble
      ref="hiddenTroubleRef"
      :hiddenTroubleType="hiddenTroubleType"
      :hiddenTroubleDialog.sync="hiddenTroubleDialog"
    ></hiddenTrouble>

    <videoObserve
      ref="videoObserveRef"
      :videoObserveType="videoObserveType"
      :videoObserveDialog.sync="videoObserveDialog"
    ></videoObserve>

    <senseObserve
      ref="senseObserveRef"
      :senseObserveDialog.sync="senseObserveDialog"
    >
    </senseObserve>

    <spotHomework
      ref="spotHomeworkRef"
      :spotHomeworkDialog.sync="spotHomeworkDialog"
    >
    </spotHomework>

    <fileIpUpload ref="fileUploadRef" :fileUploadDialog.sync="fileUploadDialog">
    </fileIpUpload>
    <videoDialog ref="videoRef" :videoDialog.sync="videoDialog"> </videoDialog>
    <specialWorkTable
      ref="specialWorkTableRef"
      :specialWorkDialog.sync="specialWorkDialog"
    >
    </specialWorkTable>
    <fireTable ref="fireTableRef" :fireTableDialog.sync="fireTableDialog">
    </fireTable>
  </div>
</template>

<script>
import {
  getScreenNumApi,
  getVideoDetectionAlarmListApi,
  getSensingDetectionApi,
  getJobNowApi,
  vehiclePageApi,
  liveUrlApi,
} from '@/api/index'
import { options1, options2 } from '@/utils/dictionary'
import hiddenTrouble from './dialogSection/hiddenTrouble.vue'
import videoObserve from './dialogSection/videoObserve.vue'
import senseObserve from './dialogSection/senseObserve.vue'
import spotHomework from './dialogSection/spotHomework.vue'
import fileIpUpload from './dialogSection/fileIpUpload.vue'
import videoDialog from './dialogSection/videoDialog.vue'
import specialWorkTable from './dialogSection/specialWorkTable.vue'
import fireTable from './dialogSection/fireTable.vue'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入中文语言包
import relativeTime from 'dayjs/plugin/relativeTime' // 导入相对时间插件
// 使用插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // 设置语言为中文

import flvjs from 'flv.js' // 引入flv.js

let flvPlayer = null // 将 flvPlayer 存储在外部以便全局控制
export default {
  name: 'indexPage',
  props: {},
  components: {
    hiddenTrouble,
    videoObserve,
    senseObserve,
    spotHomework,
    fileIpUpload,
    videoDialog,
    specialWorkTable,
    fireTable
  },
  data() {
    return {
      timeDate: '',
      timeWeek: '',
      timeNow: '',
      nowActive: 1,
      homeworkList: [],
      homeworkTotal: '',
      videoList: [],
      videoTotal: '',
      gasList: [],
      gasTotal: '',
      vehicleDialog: false,
      vehicleData: [],
      vehicleTotal: null,
      vehicleParams: {
        page: 1,
        pageSize: 7,
        carDriver: '',
        carStatus: '',
        carType: '',
      },
      options1,
      options2,
      screenNumBoj: {
        total: '',
        isChange: '',
        noChange: '',
      },
      addVehicleDialog: false,
      maskDialog: false,
      hiddenTroubleDialog: false,
      hiddenTroubleType: '',
      hiddenTroubleRef: null,
      videoObserveDialog: false,
      videoObserveType: '',
      videoObserveRef: null,
      senseObserveDialog: false,
      senseObserveRef: null,
      spotHomeworkDialog: false,
      homeworkRef: null,
      fileUploadDialog: false,
      fileUploadRef: null,
      videoRef: null,
      videoDialog: false,
      userInfoName: '',
      specialWorkTableRef: null,
      specialWorkDialog: false,
      fireTableRef: null,
      fireTableDialog: false,
    }
  },
  created() {
    this.userInfoName = JSON.parse(
      sessionStorage.getItem('loginInfo')
    )?.userName
    // console.log( JSON.parse(sessionStorage.getItem('loginInfo')));
    this.updateTime()
    this.getScreenNum()
    this.getVideoDetectionAlarmList()
    this.getSensingDetection()
    this.getJobNow()
    setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  mounted() {
    this.getVideo()
    this.getVideoList()
  },
  methods: {
    updateTime() {
      const now = dayjs()
      // 获取当天日期，格式化为 YYYY-MM-DD
      this.timeDate = now.format('YYYY-MM-DD')
      // 获取当天星期，格式化为 星期X 的形式
      this.timeWeek = now.format('dddd') // 'dddd' 格式化为星期几的全称
      // 获取当天时间，格式化为 HH:mm:ss
      this.timeNow = now.format('HH:mm:ss')
    },
    chooseType(type) {
      this.nowActive = type
    },
    closeVehicle() {
      this.vehicleDialog = false
      this.resetVehicleData()
    },
    searchVehicleData() {
      this.vehiclePage()
    },
    addVehicleData() {
      this.addVehicleDialog = true
      this.maskDialog = true
    },
    resetVehicleData() {
      this.vehicleParams = {
        page: 1,
        pageSize: 7,
        carDriver: '',
        carStatus: '',
        carType: '',
      }
      this.vehiclePage()
    },
    currentVehiclePage(pageNum) {
      this.vehicleParams.page = pageNum
      this.vehiclePage()
    },
    async getScreenNum() {
      const res = await getScreenNumApi()
      this.screenNumBoj = res.data
    },
    async getVideoDetectionAlarmList() {
      const res = await getVideoDetectionAlarmListApi()
      this.videoList = res.data.videoDetectionAlarmList.slice(0, 5)
      this.videoTotal = res.data.num
    },
    async getSensingDetection() {
      const res = await getSensingDetectionApi()
      this.gasList = res.data.sensingDetectionAlarmList.slice(0, 7)
      this.gasTotal = res.data.num
    },
    async getJobNow() {
      const res = await getJobNowApi()
      this.homeworkList = res.data.jobRecordList.slice(0, 5)
      this.homeworkTotal = res.data.num
    },
    async vehiclePage() {
      const res = await vehiclePageApi({
        page: this.vehicleParams.page,
        pageSize: this.vehicleParams.pageSize,
        carDriver: this.vehicleParams.carDriver,
        carStatus: this.vehicleParams.carStatus,
        carType: this.vehicleParams.carType,
      })
      this.vehicleTotal = res.data.total
      this.vehicleData = res.data.records.map((item) => {
        return {
          ...item,
          srcList: [item.carImage],
        }
      })
    },
    openVehicleDialog() {
      this.vehicleDialog = true
      this.vehiclePage()
    },
    closeAddVehicleDialog() {
      this.addVehicleDialog = false
      this.maskDialog = false
    },
    openHiddenTrouble(type) {
      this.hiddenTroubleType = type
      this.hiddenTroubleDialog = true
      this.$refs.hiddenTroubleRef.hiddenTroubleParams.changeStatus =
        this.hiddenTroubleType
      this.$refs.hiddenTroubleRef.hiddenTroublePage()
    },
    openVideoDialog() {
      this.videoObserveDialog = true
      this.$refs.videoObserveRef.videoPage()
    },
    openSenseDialog() {
      this.senseObserveDialog = true
      this.$refs.senseObserveRef.sensePage()
    },
    openHomeworkDialog() {
      this.spotHomeworkDialog = true
      this.$refs.spotHomeworkRef.jobPage()
    },
    openFileDialog() {
      this.fileUploadDialog = true
      this.$refs.fileUploadRef.filePage()
    },
    openVideoListDialog() {
      this.videoDialog = true
      this.$refs.videoRef?.getVideoList()
    },
    openSpecialWorkDialog() {
      this.specialWorkDialog = true
      this.$refs.specialWorkTableRef?.specialWorkPage()
    },
    openFireDialog() {
      this.fireTableDialog = true
      this.$refs.fireTableRef?.fireParamsPage()
    },
    async getVideo() {
      const res = await liveUrlApi({
        deviceSerial: 'AD9285954',
        protocol: 4,
      })
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        if (flvPlayer) {
          flvPlayer.destroy()
          flvPlayer = null
        }
        flvPlayer = flvjs.createPlayer({
          type: 'flv', // 播放类型
          url: res.data.url, // FLV 流地址
          isLive: true, // 是否为直播流（如果是点播则设为 false）
        })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load() // 加载视频
        try {
          await flvPlayer.play()
        } catch (err) {
          console.error('自动播放失败:', err)
        }
        flvPlayer.on(flvjs.Events.ERROR, (errType) => {
          if (errType === 'NetworkError') {
            // 尝试重新加载（可加入重试次数限制）
            setTimeout(() => flvPlayer.load(), 2000)
          }
        })
        flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
          flvPlayer.unload()
          flvPlayer.load()
        })
      }

    },
    loginOut() {
      sessionStorage.clear()
      this.$router.push('/login')
    },
    goGovern() {
      window.location.href = 'http://60.188.49.66:25316'
    },
  },

  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  position: absolute;
  color: #f6faff;
  background-image: url('@/assets/index/图层 544.png');
  .headerTitle {
    background-image: url('@/assets/index/欣环卫智慧安全平台.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translate(-50%);
    width: 353px;
    height: 35px;
  }
  .timeBox {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    color: #ffffff;
    .left {
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
      border-right: 1px solid #9ec5e7;
      padding-right: 30px;
    }
    .right {
      padding-left: 24px;
      .rightTime {
        margin-top: 4px;
        font-size: 10px;
        color: #cdd7e6;
      }
    }
  }
  .left1Box {
    background-image: url('@/assets/index/标题.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 473px;
    height: 337px;
    position: absolute;
    left: 24px;
    top: 100px;
    .topTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 11px 0 50px;
      color: #d7fffb;
      font-size: 16px;
      .allTitle {
        cursor: pointer;
      }
    }
  }
  .left2Box {
    background-image: url('@/assets/index/标题 (1).png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 473px;
    height: 297px;
    position: absolute;
    left: 24px;
    top: 448px;
    box-sizing: border-box;
    // text-align: center;
    padding-left: 10px;
    .topTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 11px 0 50px;
      color: #d7fffb;
      font-size: 16px;
      .allTitle {
        cursor: pointer;
      }
    }
    .firstBox {
      background-image: url('@/assets/index/色相／饱和度 638.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 446px;
      height: 96px;
      margin-top: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 123px;
      padding-right: 49px;
      box-sizing: border-box;
      .left {
        .firstNum {
          margin-top: 5px;
          color: #fff221;
          font-size: 20px;
          font-weight: bold;
        }
      }
      .right {
        background-image: url('@/assets/index/矩形 513.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 64px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        color: #fff221;
        cursor: pointer;
      }
    }
    .secondBox {
      background-image: url('@/assets/index/边框.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 446px;
      height: 96px;
      transform: translateY(-14px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 123px;
      padding-right: 49px;
      box-sizing: border-box;
      .left {
        .firstNum {
          margin-top: 5px;
          color: #63ffb9;
          font-size: 20px;
          font-weight: bold;
        }
      }
      .right {
        background-image: url('@/assets/index/矩形 513 (1).png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 64px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        color: #63ffb9;
        cursor: pointer;
      }
    }
    .thirdBox {
      background-image: url('@/assets/index/色相／饱和度 639.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 446px;
      height: 96px;
      transform: translateY(-28px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 123px;
      padding-right: 49px;
      box-sizing: border-box;
      .left {
        .firstNum {
          margin-top: 5px;
          color: #6bdbff;
          font-size: 20px;
          font-weight: bold;
        }
      }
      .right {
        background-image: url('@/assets/index/矩形 513 (2).png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 64px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        color: #6bdbff;
        cursor: pointer;
      }
    }
  }
  .left3Box {
    background-image: url('@/assets/index/标题 拷贝.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 473px;
    height: 297px;
    position: absolute;
    left: 24px;
    top: 756px;
    .topTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 11px 0 50px;
      color: #d7fffb;
      font-size: 16px;
      .allTitle {
        cursor: pointer;
      }
    }
    .selectBox {
      display: flex;
      justify-content: center;
      font-size: 12px;
      padding-top: 20px;
      .video {
        background-image: url('@/assets/index/矩形 759 拷贝 11.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 89px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #def9f4;
        cursor: pointer;
        margin-right: 23px;
      }
      .activeBgi {
        color: #ffffff;
        background-image: url('@/assets/index/矩形 759 拷贝 10.png') !important;
      }
    }
  }
}
.bottomBox {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 700px;
  .bottomItem {
    margin-right: 50px;
    text-align: center;
    cursor: pointer;
  }
  .bottomItem2 {
    text-align: center;
    cursor: pointer;
  }
  .fontColor {
    color: #c1fff6;
  }
}
.right1box {
  background-image: url('@/assets/index/标题.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 473px;
  height: 337px;
  position: absolute;
  right: 24px;
  top: 100px;
  box-sizing: border-box;
  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 11px 0 50px;
    color: #d7fffb;
    font-size: 16px;
    .allTitle {
      cursor: pointer;
    }
  }
  .middleBox {
    background-image: url('@/assets/index/色相／饱和度 533.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 435px;
    height: 56px;
    margin-left: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 64px;
    padding-right: 16px;
    box-sizing: border-box;
    margin-top: 19px;
    .leftLabel {
      font-size: 16px;
      .num {
        color: #9dffde;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .allTitle {
      cursor: pointer;
      color: #d4fff2;
    }
  }
  .homeworkList {
    padding-top: 16px;
    padding-left: 22px;
    padding-right: 17px;
    .homeItem {
      background-image: url('@/assets/index/矩形 46 (1).png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 434px;
      height: 33px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 0 10px;
      .location {
        background: linear-gradient(0deg, #ffffff 0%, #98ffdc 100%);
        font-weight: bold;
        background-clip: text;
        -webkit-text-fill-color: transparent; /* 仅Webkit内核 */
        color: transparent; /* 适用于非Webkit内核 */
        width: 35%;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
      .homeworkMan {
        // line-height: 33px;
        display: flex;
        align-items: center;
        width: 25%;
        font-size: 14px;
      }
      img {
        display: block;
        margin-right: 5px;
      }
      .time {
        width: 40%;
      }
    }
  }
}
.right2Box {
  background-image: url('@/assets/index/标题 (3).png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 473px;
  height: 297px;
  position: absolute;
  right: 24px;
  top: 448px;
  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 11px 0 50px;
    color: #d7fffb;
    font-size: 16px;
    .allTitle {
      cursor: pointer;
    }
  }
  .middleBox {
    background-image: url('@/assets/index/色相／饱和度 640.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 435px;
    height: 56px;
    margin-left: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 64px;
    padding-right: 16px;
    box-sizing: border-box;
    margin-top: 11px;
    .leftLabel {
      font-size: 16px;
      .num {
        color: #ffa42e;
        font-size: 18px;
        font-weight: bold;
        margin-left: 18px;
      }
    }
    .allTitle {
      cursor: pointer;
      color: #d4fff2;
    }
  }
  .videoList {
    padding: 0 20px;
    padding-top: 8px;
    .videoTitle {
      display: flex;
      align-items: center;
      background-color: #3a5551;
      height: 24px;
      line-height: 24px;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 0 10px;
      margin-bottom: 1px;
      .videoName {
        width: 30%;
      }
      .videoEquip {
        width: 25%;
      }
      .videoAlarmTime {
        width: 35%;
      }
      .handle {
        width: 10%;
      }
      .yellowC {
        color: #ffbe32;
      }
    }
    .videoItem {
      font-weight: normal;
      background-color: #283d3a;
      color: #e4edeb;
      box-sizing: border-box;
    }
    .videoItem:hover {
      background-color: #573d17;
      border: 1px solid #996e2b;
      cursor: pointer;
    }
  }
}

.right3Box {
  background-image: url('@/assets/index/标题 (3).png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 473px;
  height: 297px;
  position: absolute;
  right: 24px;
  top: 756px;

  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 11px 0 50px;
    color: #d7fffb;
    font-size: 16px;
    .allTitle {
      cursor: pointer;
    }
  }
  .middleBox {
    background-image: url('@/assets/index/色相／饱和度 640 拷贝 2.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 435px;
    height: 56px;
    margin-left: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 64px;
    padding-right: 16px;
    box-sizing: border-box;
    margin-top: 11px;
    .leftLabel {
      font-size: 16px;
      .num {
        color: #ffe42e;
        font-size: 18px;
        font-weight: bold;
        margin-left: 18px;
      }
    }
    .allTitle {
      cursor: pointer;
      color: #d4fff2;
    }
  }
  .videoList {
    padding: 0 20px;
    padding-top: 8px;
    .videoTitle {
      display: flex;
      align-items: center;
      background-color: #3a5551;
      height: 24px;
      line-height: 24px;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 0 10px;
      margin-bottom: 1px;
      .videoName {
        width: 30%;
      }
      .videoEquip {
        width: 25%;
      }
      .videoAlarmTime {
        width: 35%;
      }
      .handle {
        width: 10%;
      }
      .yellowC {
        color: #ffbe32;
      }
    }
    .videoItem {
      font-weight: normal;
      background-color: #283d3a;
      color: #e4edeb;
      box-sizing: border-box;
    }
    .videoItem:hover {
      background-color: #51480c;
      border: 1px solid #a89f4a;
      cursor: pointer;
    }
  }
}

.problemDialog {
  background-image: url('@/assets/index/色相／饱和度 1 拷贝.png');
  width: 1080px;
  height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 60px 63px 30px;
  .dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .dialogForm {
    display: flex;
    margin-top: 20px;
    input::placeholder {
      color: #e8f0ef; /* 你可以根据需要修改颜色值 */
      opacity: 1; /* 有些浏览器默认placeholder的透明度较低，可以设置为1使其不透明 */
    }
    input {
      color: #fff !important; /* 你可以根据需要修改颜色值 */
    }
    .el-input {
      width: 240px;
      margin-right: 24px;
    }
    ::v-deep .el-input__inner {
      background-color: transparent !important;
      border-radius: 4px;
      border: 1px solid #3f5b56;
      width: 240px;
      color: #fff !important;
    }
    /* 为 .custom-time-picker 类添加的 .el-date-editor 元素设置背景色和边框 */
    .custom-time-picker {
      background-color: transparent !important; /* 设置背景颜色 */
      border: 1px solid #3f5b56;

      ::v-deep .el-range-input {
        background-color: transparent !important; /* 设置背景颜色 */
      }
    }
    .selectBox {
      width: 200px;
      margin: 0 24px;
      ::v-deep .el-input__inner {
        background-color: transparent !important;
        border-radius: 4px;
        border: 1px solid #3f5b56;
        width: 200px;
        color: #fff !important;
      }
    }
    .searchBtn {
      background-color: #008870;
      color: #fff;
      border: 1px solid #008870;
    }
    .resetBtn {
      background-color: transparent;
      color: #fff;
      border: 1px solid #3f5b56;
    }
  }
  .formBox {
    padding: 26px 0 0;
    .formTitle {
      background-color: #20374f;
      height: 36px;
      line-height: 36px;
      display: flex;
      .titleOne {
        width: 25%;
        text-align: center;
        color: #fff;
      }
    }

    .formItem {
      background-color: transparent;
      border-bottom: 1px solid #334961;
    }
    ::v-deep .el-table,
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    ::v-deep .el-table__body {
      tr:hover > td {
        background-color: #0d325e !important;
      }
    }

    .greenC {
      color: #30fbdd;
    }
    .redC {
      color: #ff3057;
    }
    .yellowC {
      color: #ffd321;
    }
    .formBoxHandle {
      display: flex;
      justify-content: center;
      color: #28e0bf;
      .edit {
        margin: 0 10px;
      }
    }
  }
  .pageBox {
    padding-top: 10px;
    width: 100%;
    text-align: center;
  }
}
.addVehicleDialog {
  width: 544px !important;
  height: 480px;
  background: #172526;
  box-shadow: 0px 6px 32px 0px rgba(7, 78, 82, 0.5);
  border-radius: 16px;
  border: 1px solid #297073;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  .addVehicleTitle {
    display: flex;
    justify-content: space-between;
    padding: 24px 32px;
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    img {
      display: flex;
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    .confirmBtn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #008870;
      border-radius: 4px;
      margin-right: 24px;
      cursor: pointer;
    }
    .cancelBtn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: transparent;
      border: 1px solid #8bc0b7;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保遮罩层在最前面 */
}
.videoBox {
  height: 290px;
  padding-top: 10px;
  padding: 10px 18px;
  box-sizing: border-box;
  #videoElement {
    width: 100%;
    height: 100%;
  }
}

.roleBox {
  background-image: url('@/assets/色相／饱和度 531.png');
  width: 209px;
  height: 36px;
  line-height: 36px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 32px;
  right: 46px;
  padding-left: 47px;
  box-sizing: border-box;
  cursor: pointer;
  .roleArrow {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    padding-bottom: 5px;
  }

  .roleBottomBox {
    opacity: 0; /* 默认透明 */
    visibility: hidden; /* 隐藏但保留布局 */
    transition: opacity 0.3s, visibility 0.3s;
    width: 120px;
    height: 104px;
    background: rgba(22, 38, 40, 0.9);
    box-shadow: 0px 4px 8px 0px rgba(0, 136, 118, 0.3);
    border-radius: 4px;
    border: 1px solid #266b66;
    position: absolute; /* 关键点：改为绝对定位 */
    top: 100%; /* 定位到父元素底部 */
    // left: 0; /* 与父元素左对齐 */

    transform: translate(-6px, 6px);
    z-index: 9;
    padding: 0 12px;
    font-weight: 400;
    font-size: 14px;
    color: #dffffd;
    .goGovern {
      height: 50px;
      border-bottom: 1px solid #3f6367;
      line-height: 50px;
      text-align: center;
    }
    .loginOut {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .goGovern:hover {
      color: #3dffea !important;
    }
    .loginOut:hover {
      color: #3dffea !important;
    }
  }
}
.roleBox:hover .roleBottomBox {
  opacity: 1; /* 显示 */
  visibility: visible;
}
</style>
